<script setup lang="ts">
import AMapLoader from '@amap/amap-jsapi-loader'
import {onMounted} from "vue";

onMounted(() => {
  createMap()
})

const createMap = () => {
  AMapLoader.load({
    key: '90c3d98ed042d6326b563fa7e36351ac',
    version: '2.0',
    plugins: ['AMap.Scale', 'AMap.ToolBar', 'AMap.MapType']
  }).then((Amap) => {
    const map:any = new Amap.Map('maps', {
      resizeEnable: true,
      scrollWheel: false,
      defaultCursor: 'move',
      viewMode: '3D',
      mapStyle: 'amap://styles/grey',
      wallColor: 'rgba(175,206,233,0.2)',
      roofColor: 'rgba(175,206,233,0.5)',
      zoom: 16, //初始化地图层级
      center: [104.642889, 28.752321], //初始化地图中心点
      pitch: 35,
      WebGLParams: {
        preserveDrawingBuffer: true
      }
    })
    map.addControl(new Amap.Scale({ position: { bottom: '0', left: '0' } }))
    map.addControl(new Amap.ToolBar({ position: { bottom: '0', right: '0' } }))
    map.addControl(new Amap.MapType({ position: { top: '0', left: '0' } }))
    map.add(new Amap.Marker({
      position: map.getCenter(),
      anchor: 'bottom-center',
      title: '宜宾市人民政府'
    }))
  }).catch(e => {
    console.log(e)
  })
}
</script>

<template>
  <section class='amap h-full'>
    <div id='maps-hidden' class='maps-area h-full'>
      <div id='maps' class='amap-container min-h-screen' style='cursor: move; background-color: rgb(26, 35, 44);'></div>
    </div>
  </section>
</template>

<style scoped lang="less">

</style>
